<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="app">

    </div>
</body>

</html>
<script src="./js/vue.global.js"></script>
<script>

    const { h, createApp, mergeProps } = Vue;

    let o1 = {
        id: "box2",
        style: "width:200px;height:200px;background-color:red",
        class: "foo",
        onClick: () => {
            console.log("click1");
        }
    }

    let o2 = {
        class: "bar",
        innerHTML: "hello",
        onClick: () => {
            console.log("click2");
        }
    }

    let props = mergeProps(o1, o2);
    console.log("props", props);

    let t = h("div", props);

    const Header = {
        render() {
            return t
        }
    }

    createApp(Header).mount("#app");

</script>